---
interface Props {
  title: string;
  id: string;
}

const { title, id } = Astro.props;
---

<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

<script define:vars={{ title, id }}>
  const gitalk = new Gitalk({
    clientID: 'YOUR_CLIENT_ID', // GitHub Application Client ID
    clientSecret: 'YOUR_CLIENT_SECRET', // GitHub Application Client Secret
    repo: 'blog',              // 仓库名称
    owner: 'chovYena',         // 你的 GitHub 用户名
    admin: ['chovYena'],       // 管理员列表
    id: id,                    // 页面唯一标识
    title: title,              // 文章标题
    language: 'zh-CN',         // 语言
    distractionFreeMode: false // 无干扰模式
  });

  gitalk.render('gitalk-container');

  // 监听主题变化
  document.addEventListener('alpine:init', () => {
    Alpine.effect(() => {
      const isDark = Alpine.store('theme').isDark;
      const container = document.querySelector('.gt-container');
      if (container) {
        if (isDark) {
          container.classList.add('gt-dark');
        } else {
          container.classList.remove('gt-dark');
        }
      }
    });
  });
</script>

<style>
  /* 暗色模式样式 */
  :global(.dark) .gt-container {
    --gt-color-main: #60a5fa;
    --gt-color-sub: #9ca3af;
    --gt-color-text: #e5e7eb;
    --gt-color-bg: #1f2937;
    --gt-color-hr: #374151;
    --gt-color-input-bg: #374151;
    --gt-color-input-border: #4b5563;
    --gt-color-popover-bg: #374151;
    --gt-color-comment-bg: #1f2937;
  }
</style> 